import { AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core';

interface Options {
  bgColor?: string
}

@Directive({
  selector: '[appHover]'
})
export class HoverDirective implements AfterViewInit {
  // 注入 appHover 的参数
  @Input("appHover") appHover: Options = {}
  // 初始化元素
  element: HTMLElement
  constructor(private elementRef: ElementRef) {
    this.element = elementRef.nativeElement
  }

  ngAfterViewInit () {
    this.element.style.backgroundColor = this.appHover.bgColor || 'skyblue'
  }

  // 为元素添加事件
  @HostListener("mouseenter") enter () {
    this.element.style.backgroundColor = "pink"
  }

  @HostListener("mouseleave") leave () {
    this.element.style.backgroundColor = "red"
  }
}
